<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    .user {
        color: red;
        font-weight: bold;
    }
</style>
<body>
<div>首页</div>
<p></p>

<script>

    window.onload = function () {
        var p = document.querySelector('p');

        // 1.先去掉 ?  substr('起始的位置', 截取几个字符)
        // substr 和 substring区别
        // 第一个参数都是开始的索引号, 区别在于第二个参数,
        // 它们的第二个参数都是可选的, substr第二个参数是length ->长度, substring end -> 索引号
        // substr(from: number, length?: number): string;
        // substring(start: number, end?: number): string;
        var search = location.search.substring(1)

        // 2.利用 = 将字符串分割为数组 split('=')
        var split = search.split('=');
        p.innerHTML = `欢迎<span class="user"> ${split[1]} </span>用户`;
    }
</script>
</body>
</html>
